<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
	</head>
    <style>
        *{
	padding: 0;
	margin: 0 auto;
}
a{
	text-decoration: none;
	color: inherit;
}
ul,li,ol{
	list-style: none;
}
body{
    font: 14px/1.5;
    color: #333;
    background-color: #fff;
}
.nav{
	width: 100%;
	border-bottom: 2px solid #ff6700;
}
.navcon{
	width: 1226px;
	height: 110px;
}

.logo>img{
	float: left;
}
.logo>h2{
	float: left;
	font-size: 28px;
	margin: 40px 15px 0px 15px;
	color: #424242;
}
.logo>h2>span{
	font-size: 12px;
	color: #757575;
	margin: 50px 0 0 15px;
}
.login{
	float: right;
	margin-top: 50px;
}	
.login>a{
	margin: 0px 5px 5px 5px;
	font-size: 12px;
	color: #757575;
}
.content{
	width: 100%;
	background-color: #f5f5f5;
}
.bcolor{
	width: 100%;
	background-color: #F5F5F5;
	height: 40px;
}
table{
	font-size: 14px;
	width: 1226px;
	background-color: #fff;
}
table th{
	line-height: 60px;
}
table td{
	line-height: 70px;
	text-align: center;
	border-top: 1px solid #e0e0e0;
}
.footer{
	font-size: 14px;
	width: 1226px;
	height: 50px;
	background-color: #FFFFFF;
	margin-top: 30px;
	color: #757575;
}
.footer>span>a{
	text-align: center;
	width: 200px;
	height: 48px;
	background-color: #FF6700;
	font-size: 18px;
	float: right;
}
.footer>span>a>p{
	margin-top: 10px;
	font-size: 18px;
	color: #fff;
}
.footer>.all{
	margin-left: 700px;
}
    </style>
	<body>
		<!--头部登录部分-->
		<div class="nav">
			<div class="navcon">
				<div class="logo">
					<img src="http://yfgssb.gitee.io/oldman-website/img/logo.png" >
					<h2>我的购物车<span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span></h2>
				</div>
				<div class="login">
					<a href="#">登录</a><span>|</span><a href="#">注册</a>	
				</div>
			</div>
		</div>
		<!--具体内容-->
		<div id="app">
			<div class="content">
				<div class="bcolor"></div>
				<table>
					<tr>
						<th><input type="checkbox" :checked="isCheckedAll" @click="chang"/>全选</th>
						<th></th>
						<th>商品名称</th>
						<th>单价</th>
						<th>数量</th>
						<th>小计</th>
						<th>操作</th>
					</tr>
					<tr v-for="(v,index) in goods":key="v.id" :title="v.title" :price="v.price">
						<td><input type="checkbox" v-model= "v.checked" /></td>
						<td><img :src="v.img" style="width: 80px;height: 80px;padding-top:29px;"/></td>
						<td style="font-size: 18px;">{{v.title}}</td>
						<td>{{v.price}}元</td>
						<td>
							<button @click="v.num--" style="width: 38px;height: 38px;background-color: #FFFFFF;border: 1px solid #e0e0e0;border-right: none;">-</button>
							<span>{{v.num}}</span>
							<button @click="v.num++" style="width: 38px;height: 38px;background-color: #FFFFFF;border: 1px solid #e0e0e0;border-left: none;" @click="add">+</button>
						</td>
						<td style="color: #FF6700;">{{v.price*v.num}}</td>
						<td><img :src="v.control" @click="del(index,v.id)" style="padding-top:29px;"/></td>
					</tr>
				</table>
				<!--底部结算-->
				<div class="footer">
					<a href="#" style="margin-left: 10px;">继续购物</a><span style="margin-left: 10px;">已选择<i style="color: #FF6700;">{{jSut()}}</i>件</span>
					<span class="all">
						合计:<span v-text="getSum" style="color: #FF6700;font-size: 30px;"></span>元
						<a href="#"><p>去结算</p></a>
					</span>
				</div>
			</div>
		</div>
		<script>
			const vm=Vue.createApp({
				data(){
					return{
						goods:[
							{
								id:0,
								img:'http://yfgssb.gitee.io/oldman-website/img/goods_one.png',
								title:'	九号卡丁车Pro兰博基尼汽车定制版 黄色',
								price:9999,
								num:1,
								control:'http://yfgssb.gitee.io/oldman-website/img/close.png',
							},
							{
								id:1,
								img:'http://yfgssb.gitee.io/oldman-website/img/goods_two.png',
								title:'小米小爱触屏音箱 白色',
								price:269,
								num:1,
								control:'http://yfgssb.gitee.io/oldman-website/img/close.png',
							},
							{
								id:2,
								img:'http://yfgssb.gitee.io/oldman-website/img/goods_three.png',
								title:'九号平衡车 白色',
								price:2199,
								num:1,
								control:'http://yfgssb.gitee.io/oldman-website/img/close.png',
							},
							{
								id:3,
								img:'http://yfgssb.gitee.io/oldman-website/img/goods_four.png',
								title:'Xiaomi Buds 4 Pro 月影黑',
								price:2199,
								num:1,
								control:'http://yfgssb.gitee.io/oldman-website/img/close.png',
							},
						]}
					},
					methods:{
						//全选
						chang(){
						 	var flag = !this.isCheckedAll;
						 	this.goods.forEach(v=>v.checked = flag);
						 },
						 del(index,id){
							 this.goods.splice(index,1);
							 this.checked = this.checked.filter(v => v.id!=id);
							 this.chang();
						 },
						 jSut(){
							var sut = 0;
							for(var i in this.goods){
								var v = this.goods[i];
								 if(v.checked == true){
									 sut += this.goods[i].num;
								 }
							}
							return sut;
						 }
					},
					computed:{
						//计算总价
						getSum(){
							var sum = 0;
							this.goods.forEach(v => {
								if(v.checked == true){
									sum += v.price * v.num;
								}
							})
							return sum;
						},
						//反选
						isCheckedAll(){
							return this.goods.every(v => v.checked)
						},
					}
				}).mount('#app');
		</script>
	</body>
</html>